<template>
    <div>
        <!-- 我是用户 -->
        <div class="top">
            <h1 class="titletext">设备申请</h1>
        </div>
        <el-table :data="tableData" style="width: 100%" empty-text="暂无数据">
            <el-table-column label="序号" width="60">
                <template #default="{ $index }">
                    {{ startIndex + $index }}
                </template>
            </el-table-column>
            <el-table-column prop="dname" label="设备名" width="180" />
            <el-table-column prop="dstatus" label="设备状态">
                <template #default="scope">
                    {{ scope.row.dstatus === 0 ? "已加入平台" : (scope.row.dstatus === 1 ? "添加/未使用" : (scope.row.dstatus ===
                        2
                        ? "添加/已使用" : "已删除")) }}
                </template>
            </el-table-column>
            <el-table-column prop="updateby" label="修改人">
                duxinlei
            </el-table-column>
            <el-table-column prop="updatetime" label="时间" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button link :type="scope.row.remark === remarks ? 'info' : 'primary'"
                        @click="handleApplication(scope.row)" :disabled="scope.row.remark !== '' ? true : false">
                        申请设备
                    </el-button>
                    <el-button link type="primary" @click="handleAppReturn(scope.row)"
                        v-show="scope.row.remark === remarks">
                        退回
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:page-size="queryParams.pageSize" :page-sizes="[5, 10, 15]" layout="  prev, pager, next"
            :total="queryParams.total" @current-change="handleCurrentChange" @size-change="handleSizeChange" />

        <el-dialog v-model="dialogVisibleTwo" title="申请设备" width="500" :before-close="handleClose">
            <div>
                <el-form :model="formTwo" label-width="auto" ref="ruleFormRef" :rules="rules" style="max-width: 600px">
                    <el-form-item label="植物名称" prop="name">
                        <el-input v-model="formTwo.name" />
                    </el-form-item>
                    <el-form-item label="培养时段">
                        <el-col :span="11">
                            <el-config-provider :locale="locale">
                                <el-date-picker v-model="formTwo.date1" type="date" placeholder="开始时间" :locale="zhCn"
                                    style="width: 100%" />
                            </el-config-provider>
                        </el-col>
                        <el-col :span="2" class="text-center">
                            <span style="margin:0px 5px;">----</span>
                        </el-col>
                        <el-col :span="11">
                            <el-config-provider :locale="locale">
                                <el-date-picker v-model="formTwo.date2" type="date" placeholder="预计结束时间"
                                    style="width: 100%" :picker-options="pickerOptions" />
                            </el-config-provider>
                        </el-col>
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisibleTwo = false">取消</el-button>
                    <el-button type="primary" @click="handleYes(formTwo)">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { getList, getAddDeviceAss, getReturn } from '@/api/Device/index'
import { ref, onMounted, reactive, computed, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'


import zhCn from 'element-plus/es/locale/lang/zh-cn'

// 表单验证

const rules = reactive({
    name: [
        { required: true, message: '请输入要培养的植物', trigger: 'blur' },
    ]
})

const locale = zhCn;
const storeuserId = sessionStorage.getItem('userinfo');
const dataObj = JSON.parse(storeuserId);
let queryParams = reactive({
    pageNum: 1,
    pageSize: 5,
    total: 0,
})
const startIndex = computed(() => {
    return (queryParams.pageNum - 1) * queryParams.pageSize + 1;
});
let tableData = ref([])
onMounted(() => {
    handleList()

})
const handleList = () => {
    getList(queryParams).then(res => {
        tableData.value = res.data.records
        queryParams.total = res.data.total
    })
}

const handleCurrentChange = (val) => {
    queryParams.pageNum = val;
    handleList();
};
const handleSizeChange = (val) => {
    queryParams.pageSize = val;
    handleList();
};
// 申请设备里面的表单
const formTwo = ref(
    {
        name: '',
        date1: null,
        date2: null,
        did: '',

    }
)
const dialogVisibleTwo = ref(false)
// 时间判断
watch(() => formTwo.value.date1, (newDate1) => {
    if (formTwo.value.date2 && newDate1 && newDate1 > formTwo.value.date2) {
        formTwo.value.date2 = newDate1;
    }
});

watch(() => formTwo.value.date2, (newDate2) => {
    if (formTwo.value.date1 && newDate2 && newDate2 < formTwo.value.date1) {
        formTwo.value.date2 = formTwo.value.date1;
        ElMessage({
            type: 'info',
            message: '结束时间大于开始时间'
        })

    }
});

const handleApplication = (row) => {
    dialogVisibleTwo.value = true
    console.log(row)
    formTwo.value.did = row.did
    formTwo.value.uid = row.uid
    console.log(formTwo, 'sdacf')
}

const uids = dataObj.uid;
const ruleFormRef = ref(null);
const handleYes = (e) => {
    ruleFormRef.value.validate((valid) => {
        if (valid) {
            let twofrom = ref(
                {
                    startdate: e.date1,
                    enddate: e.date2,
                    gname: e.name,
                    did: e.did,
                    uid: uids,
                    status: 2
                }
            )
            getAddDeviceAss(twofrom._rawValue).then(res => {
                if (res.code == 200) {
                    ElMessage({
                        message: '申请成功',
                        type: 'success',
                    })
                    console.log(res, '申请而设备')
                    dialogVisibleTwo.value = false
                } else {
                    ElMessage({
                        message: '申请失败',
                        type: 'warning',
                    })
                    dialogVisibleTwo.value = false
                }
            })
        } else {
            return false
        }
    })


}
// 退回按钮显示与隐藏
const remarks = uids + ':' + 1

// 退回操作
const handleAppReturn = (e) => {

    // console.log(uids + ':' + 1)
    const returnobj = {
        did: e.did,
        uid: uids
    }

    ElMessageBox.confirm(
        '确定退回该设备吗?',
        '是否退回',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            getReturn(returnobj).then(res => {
                console.log(res);
                handleList()
                ElMessage({
                    message: '退回成功',
                    type: 'success',
                })
            }).catch(error => {
                console.log(error)
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消退回',
            })
        })
}
</script>

<style lang="scss" scoped>
.top {
    height: 2vh;
    padding: 30px 0px;
    /* background-color: #f9f9f9; */
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    /*顶部标题 */
    .titletext {
        font-size: 20px;
        font-weight: bold;
        border-left: 5px solid #409eff;
        padding-left: 10px;
    }
}

.disabled-date {
    pointer-events: none;
    /* 禁用鼠标交互 */
    color: gray;
    /* 改变颜色表示禁用状态 */
    text-decoration: line-through;
    /* 可添加删除线等样式进一步提示禁用 */
}
</style>